<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 
         如果我们不希望某个元素因为其他元素浮动的影响而改变位置(比如当前元素的上方元素开启了浮动，如果当前元素不采取措施的话，他是会向上方移动的)
                    可以通过clear属性来清除浮动元素对当前元素所产生的影响

                clear
                    - 作用：清除浮动元素对当前元素所产生的影响
                    - 可选值：
                        left 清除左侧浮动元素对当前元素的影响
                        right 清除右侧浮动元素对当前元素的影响
                        both 清除两侧中最大影响的那侧

                    原理：
                        设置清除浮动以后，浏览器会自动为元素添加一个上外边距，
                            以使其位置不受其他元素的影响 */
    .box1{
        width: 300px;
        height: 200px;
        background-color: turquoise;
        float: left;
    }

    .box2{
        width: 300px;
        height: 500px;
        background-color: wheat;
        float: right;
    }

    .box3{
        width: 300px;
        height: 200px;
        background-color:tomato;
        clear: right;
    }
    
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>